<!-- template inhertance -->
<extend name="layout/layui24"/>

<!-- styles -->
<block name="linkcss">
    <link rel="stylesheet" href="/Public/home/css/userCenter/authorization/create.css">
</block>

<!-- scripts -->
<block name="linkjs">

</block>

<!-- page title -->
<block name="webtitle">
    <title>授权详情</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li><a href="authorization">授权</a></li>
        <li class="active">授权详情</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <!--头部信息-->
    <div class="mb-20">
        <!--标题信息-->
        <div class="header">
            <div style="font-size: 36px">
                {$auth.number}
                <span style="font-size: 60%; position: relative; top: -5px;">
                    <switch name="auth.status">
                        <case value="0">
                            <span class="tag tag-success">已启用</span>
                        </case>
                        <case value="1">
                            <span class="tag tag-danger">已禁用</span>
                        </case>
                        <case value="-1">
                            <span class="tag tag-warning">未启用</span>
                        </case>
                        <default/>
                        <span class="tag tag-night">已过期</span>
                    </switch>
                </span>
            </div>
            <div>
                <small class="text-muted">{$auth.user} 创建于 {$auth.create_time|date="Y年m月d日 H:i",###}</small>
            </div>
        </div>
        <!--按钮组-->
        <div class="toolbar mt-15">
            {//权限控制能否点击，生成的data-id代表该订单的id}
            <if condition="$auth">
                {//如果状态小于0,则表示未启用，按钮显示启用，反之就显示暂停}
                <eq name="auth.status" value="0">
                    <button type="button" class="btn btn-default btn-sm" data-id="{$auth.id}" data-action="pause">
                        <i class="icon-pause"></i>
                        暂停授权
                    </button>
                    <else/>
                    <button type="button" class="btn btn-default btn-sm" data-id="{$auth.id}" data-action="create">
                        <i class="icon-play"></i>
                        启用授权
                    </button>
                </eq>
                <else/>
                {//如果状态小于0,则表示未启用，按钮显示启用，反之就显示暂停}
                <eq name="auth.status" value="0">
                    <button type="button" class="btn btn-default btn-sm" disabled>
                        <i class="icon-pause"></i>
                        暂停授权
                    </button>
                    <else/>
                    <button type="button" class="btn btn-default btn-sm" disabled>
                        <i class="icon-play"></i>
                        启用授权
                    </button>
                </eq>
            </if>

            <if condition="$auth">
                <div class="btn-group">
                    <buton type="button" class="btn btn-default btn-sm" data-id="{$auth.id}" data-action="edit">
                        <i class="icon-edit"></i>
                        编辑
                    </buton>
                    <buton type="button" class="btn btn-default btn-sm" data-id="{$auth.id}" data-action="del">
                        <i class="icon-trash"></i>
                        删除
                    </buton>
                </div>
                <else/>
                <div class="btn-group">
                    <buton type="button" class="btn btn-default btn-sm" disabled>
                        <i class="icon-edit"></i>
                        编辑
                    </buton>
                    <buton type="button" class="btn btn-default btn-sm" disabled>
                        <i class="icon-trash"></i>
                        删除
                    </buton>
                </div>
            </if>
        </div>
    </div>

    <!--内容详情-->
    <div class="layui-tab layui-tab-brief" lay-filter="tab">
        <ul class="layui-tab-title">
            <li lay-id="details" class="layui-this">授权信息</li>
            <li lay-id="log">操作日志</li>
        </ul>
        <div class="layui-tab-content">
            <!--授权信息-->
            <div class="layui-tab-item layui-show">
                <volist name="auth.details" id="vo" key="k">
                    <div class="section-grey-table">
                        <div class="section-title">授权信息（{$k}）</div>
                        <div class="section-body">
                            <table class="table table-bordered">
                                <colgroup>
                                    <col width="140">
                                    <col>
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>授权模块</td>
                                    <td>{$vo.module}</td>
                                </tr>
                                <tr>
                                    <td>授权操作</td>
                                    <td>{$vo.auth_action}</td>
                                </tr>
                                <tr>
                                    <td>被授权人</td>
                                    <td>{$vo.auth_user}</td>
                                </tr>
                                <tr>
                                    <td>授权开始时间</td>
                                    <td>{$vo.from|date='Y-m-d',###}</td>
                                </tr>
                                <tr>
                                    <td>授权结束时间</td>
                                    <td>{$vo.to|date='Y-m-d',###}</td>
                                </tr>
                                <tr>
                                    <td>备注</td>
                                    <td>{$vo.remark|nl2br}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </volist>
            </div>
            <!--操作日志记录转出别人的完成情况-->
            <div class="layui-tab-item">
                <notempty name="actions">
                    {//引入完成情况详情表}
                    <include file="Usercenter/includes/ECO"/>
                    <else/>
                    <div class="no--info"></div>
                </notempty>
            </div>
        </div>
    </div>
</block>

<block name="scripts">
    <script>
        $(function () {
            layui.use(['layer', 'element'], function () {
                var layer = layui.layer,
                    element = layui.element;

                //获取hash来切换选项卡
                var layId = location.hash.replace(/^#tab=/, '');
                element.tabChange('tab', layId);

                //监听tab切换，改变hash值
                element.on('tab(tab)', function () {
                    location.hash = 'tab=' + this.getAttribute('lay-id');
                });

                //button
                $(document).on('click', '.btn', function () {
                    var action = $(this).attr('data-action'),
                        id = $(this).attr('data-id');

                    var data = {action: action, id: id};

                    //启用
                    if (action === 'create') {
                        console.log(data);
                        layer.confirm("启用后被授权人将有权操作，确定要启用吗？", {icon: 3, title: "提示"}, function (index) {

                            submit(data);
                            layer.close(index);
                        });
                    }

                    //暂停
                    if (action === 'pause') {
                        layer.confirm("暂停后被授权人将无权操作，确定要暂停吗？", {icon: 3}, function (index) {
                            submit(data);
                            console.log(data);

                            layer.close(index);
                        });
                    }

                    //编辑
                    if (action === 'edit') {
                        submit(data);
                        console.log(data);

                        //跳转到编辑页
                        location.href = "authorizationEdit" + "?id=" + data.id;
                    }

                    //删除
                    if (action === 'del') {
                        layer.confirm("删除后将无法在恢复，确定要删除吗？", {icon: 3}, function (index) {
                            submit(data);
                            console.log(data);

                            layer.close(index);
                        })
                    }
                });

                //submit
                function submit(data) {
                    $.post("", data, function (response) {
                        if (response.code) {
                            layer.msg(response.msg, {icon: 2});
                        } else {
                            //do something
                        }
                    })
                }
            })
        })
    </script>
</block>